<template>
  <div class="main-container" v-loading="loading">
    <el-card class="box-card !border-none" shadow="never">
      <div class="flex justify-between items-center">
        <span class="text-page-title">{{ pageName }}</span>
      </div>

      <div class="flex mt-[20px]">
        <div class="relative overflow-hidden w-[340px] h-[680px] z-0 bg-[#f5f5f5]">
          <img
            class="absolute top-0 left-0 z-10 pointer-events-none"
            src="@/views/addon/shop/assets/discount_config.png"
          />
          <div class="absolute top-0 left-0 w-[340px]">
            <img
              class="w-full h-[256px]"
              v-if="isShow"
              src="@/views/addon/shop/assets/discount_banner.png"
            />
            <el-carousel height="256px" arrow="never" v-else>
              <template v-for="(item, index) in formData.list" :key="'img' + index">
                <el-carousel-item v-if="item.imageUrl">
                  <img class="w-full h-full" :src="img(item.imageUrl)" />
                </el-carousel-item>
              </template>
            </el-carousel>
          </div>
        </div>
        <div class="ml-[20px]">
          <h3 class="panel-title !text-sm">{{ t('headTitle') }}</h3>

          <el-form class="page-form" :model="formData" label-width="120px" ref="formRef">
            <div
              v-for="(item, index) in formData.list"
              class="border-[1px] border-[var(--el-border-color)] border-dashed w-[500px] pt-[15px] mb-[15px] relative item"
              :key="index"
            >
              <el-form-item
                :label="t('image')"
                :prop="`list.${index}.imageUrl`"
                :rules="[
                  {
                    required: true,
                    trigger: 'change',
                    validator: (rule: any, value: any, callback: any) => {
                      if (!value) {
                        callback(t('imagePlaceholder'))
                      }
                      callback()
                    }
                  }
                ]"
              >
                <upload-image v-model="item.imageUrl" :limit="1" />
              </el-form-item>
              <el-form-item
                :label="t('toLink')"
                :prop="`list.${index}.toLink.name`"
                :rules="[
                  {
                    required: true,
                    trigger: 'change',
                    validator: (rule: any, value: any, callback: any) => {
                      if (!value) {
                        callback(t('toLinkPlaceholder'))
                      }
                      callback()
                    }
                  }
                ]"
              >
                <diy-link v-model="item.toLink" />
              </el-form-item>
              <span
                v-if="formData.list.length > 1"
                class="cursor-pointer absolute top-[-8px] right-[-8px] delete"
                @click="deleteConfigList(index)"
                ><el-icon color="#bbbbbb" size="20px"><CircleCloseFilled /></el-icon
              ></span>
            </div>
            <div class="flex w-full justify-center">
              <el-button class="w-[400px]" @click="addConfigList">{{
                t('addConfigList')
              }}</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </el-card>

    <!-- 提交按钮 -->
    <div class="fixed-footer-wrap">
      <div class="fixed-footer">
        <el-button type="primary" @click="onSave(formRef)">{{ t('save') }}</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { t } from '@/lang'
import { img } from '@/utils/common'
import { getActiveDiscountConfig, editActiveDiscountConfig } from '@/views/addon/shop/api/marketing'
import { FormInstance } from 'element-plus'
import { useRoute } from 'vue-router'

const route = useRoute()
const pageName = route.meta.title
const loading = ref(false)
const isShow = computed(() => {
  return formData.value.list.every((el: any) => el.imageUrl == '')
})

const formData: Record<string, any> = ref({
  list: [{ imageUrl: '', toLink: { name: '' } }]
})

const formRef = ref<FormInstance>()
const getActiveDiscountConfigFn = () => {
  loading.value = true
  getActiveDiscountConfig()
    .then((res: any) => {
      if (res.data.length) formData.value.list = res.data
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}
getActiveDiscountConfigFn()
const addConfigList = () => {
  formData.value.list.push({ imageUrl: '', toLink: { name: '' } })
}
const deleteConfigList = (index: number) => {
  formData.value.list.splice(index, 1)
}
const onSave = async (formEl: FormInstance | undefined) => {
  if (loading.value || !formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      loading.value = true
      editActiveDiscountConfig(formData.value)
        .then((res: any) => {
          loading.value = false
          getActiveDiscountConfigFn()
        })
        .catch(() => {
          loading.value = false
        })
    }
  })
}
</script>

<style lang="scss" scoped>
.item {
  .delete {
    display: none;
  }
  &:hover {
    .delete {
      display: block;
    }
  }
}
</style>
